  <template>
  <div class="j-flag f-mgt40" v-if="comment">
    <div class="u-title u-title-1">
      <h3><span class="f-ff2">评论</span></h3>
      <span class="sub s-fc3"
        >共<span class="j-flag">{{ 12 }}</span
        >条评论</span
      >
    </div>
    <div class="m-cmmt">
      <div class="iptarea">
        <!-- 发送评论旁的头像 -->
        <div class="head">
          <img :src="$store.state.profile ? $store.state.profile : 'http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50'" />
        </div>
        <!-- 发送评论 -->
        <div class="j-flag">
          <div class="m-cmmtipt f-cb f-pr">
            <div class="u-txtwrap holder-parent f-pr" style="display: block">
              <textarea
                class="u-txt area j-flag"
                placeholder="评论"
                v-model.trim="text_content"
                @focus.stop="doComment"
              ></textarea>
            </div>
            <div class="btns f-cb f-pr">
              <i class="icn u-icn u-icn-36 j-flag"></i>
              <i class="icn u-icn u-icn-41 j-flag"></i>
              <a
                href="javascript:;"
                class="btn u-btn u-btn-1 j-flag"
                ref="notice"
                @click.stop="send_comment"
                >评论</a
              >
              <span class="zs s-fc4 j-flag">140</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cmmts j-flag" >
        <!-- 精彩评论 -->
        <div v-if="comment && comment.hotComments.length">
          <h3 class="u-hd4">精彩评论</h3>
          <div
            class="itm"
            v-for="(item, index) in comment.hotComments"
            :key="'h' + index"
          >
            <div class="head">
              <a href="javascript:;">
                <img :src="item.user.avatarUrl" />
              </a>
            </div>
            <div class="cntwrap">
              <div class="cnt f-brk">
                <a href="javascript:;" class="s-fc7" @click.stop="TO_userHome(item.user.userId)">{{
                  item.user.nickname
                }}</a>
                ：<span v-html="Text(item.content)"></span>
              </div>
              <div class="rp" style="margin-bottom: 7px">
                <div class="time s-fc4">{{ item.time | transitionTime }}</div>
                <a href="javascript:;">
                  <i
                    :class="[
                      'zan',
                      'u-icn2',
                      { 'u-icn2-12': !item.liked },
                      { 'u-icn2-13': item.liked },
                    ]"
                    @click.stop="like(item , $event)"
                  ></i>
                  {{ item.likedCount }}
                </a>
                <span class="sep">|</span>
                <a href="javascript:;" class="s-fc3" @click.stop="reply({type:'hotComments' , index:index}, $event)"
                  >回复</a
                >
              </div>
            </div> 

            <div  v-if="item.repliedMark">
             <div class="rept m-quk m-quk-1 f-pr">
               <div class="iner">
                  <div class="corr u-arr u-arr-1">
                    <em class="arrline">◆</em>
                    <span class="arrclr">◆</span>
                   </div>
                   <div class="m-cmmtipt m-cmmtipt-1 f-cb f-pr">
                     <div style="display: block;" class="u-txtwrap holder-parent f-pr j-wrap">
                       <textarea class="u-txt area j-flag" :placeholder="'回复 '+item.user.nickname" style="overflow: hidden;"  v-model="reply_content"></textarea>
                     </div>
                     <div class="btns f-cb f-pr">
                       <a href="javascript:;" class="btn u-btn u-btn-1 j-flag" @click="reply_btn(item.commentId)">回复</a>
                     </div>
                   </div>
               </div>
             </div>
          </div>
          </div>
        </div>
        <br />
        <br />
        <!-- 最新评论 -->
        <div v-if="comment &&comment.comments.length">
          <h3 class="u-hd4">最新评论</h3>
          <div class="itm" v-for="(item, index) in comment.comments" :key="'c' + index">
            <div class="head">
              <a href="javascript:;">
                <img :src="item.user.avatarUrl" />
              </a>
            </div>
            <div class="cntwrap">
              <div class="cnt f-brk">
                <a href="javascript:;" class="s-fc7" @click.stop="TO_userHome(item.user.userId)" >{{
                  item.user.nickname
                }}</a>
                ：{{ item.content }}
              </div>
              <div class="que f-brk f-pr s-fc3" v-if="item.beReplied.length">
                <span class="darr"><i class="bd">◆</i><i class="bg">◆</i></span>
                <a class="s-fc7">{{item.beReplied[0].user.nickname}}</a>
                ：{{item.beReplied[0].content}}
              </div>
              <div class="rp" style="margin-bottom: 7px">
                <div class="time s-fc4">{{ item.time | transitionTime }}</div>
                <a href="javascript:;">
                  <i
                    :class="[
                      'zan',
                      'u-icn2',
                      { 'u-icn2-12': !item.liked },
                      { 'u-icn2-13': item.liked },
                    ]"
                    @click="like(item, $event)"
                  ></i>
                  {{ item.likedCount }}
                </a>
                <span class="sep">|</span>
                <a href="javascript:;" class="s-fc3"  @click.stop="reply({type:'comments' , index:index} , $event)"
                  >回复</a>
              </div>
            </div>
             <div v-if="item.repliedMark"> 
              <div class="rept m-quk m-quk-1 f-pr">
                <div class="iner">
                  <div class="corr u-arr u-arr-1">
                    <em class="arrline">◆</em>
                    <span class="arrclr">◆</span>
                  </div>
                  <div class="m-cmmtipt m-cmmtipt-1 f-cb f-pr">
                    <div
                      style="display: block"
                      class="u-txtwrap holder-parent f-pr j-wrap"
                    >
                      <textarea
                        class="u-txt area j-flag"
                        :placeholder="'回复 ' + item.user.nickname"
                        style="overflow: hidden"
                        v-model="reply_content"
                      ></textarea>
                    </div>
                    <div class="btns f-cb f-pr">
                      <a
                        href="javascript:;"
                        class="btn u-btn u-btn-1 j-flag"
                        @click.stop="reply_btn(item.commentId , $event)"
                        >回复</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatMonth } from "../tool/tool";
import { comment ,new_comment ,comment_hot} from "../../network/song"; //评论
import { likeComment } from "../../network/song"; //点赞
import {
  comment_playlist,
  comment_album,
  comment_music,
} from "../../network/song"; //所有评论列表
export default {
  props: ["id"],
  data() {
    return {
      comment:{hotComments:[] ,comments:[] },
      next_reply:null,
      text_content: "", //评论要发送的内容,
      reply_content:'',
      ids: null,
      type: "",
    };
  },
  methods: {
    reply(index, e) { //回复
      if (!this.$store.state.userId) { //查看是否登录
        this.$login.show(e.pageY - 240);
        return;
      }

   if(this.next_reply){   //点击弹出回复消息框
      if(this.next_reply.type ==index.type && this.next_reply.index == index.index){
        this.comment[index.type][index.index].repliedMark = false
        this.next_reply = null
      }else{
        this.comment[index.type][index.index].repliedMark = true
        this.comment[this.next_reply.type][this.next_reply.index].repliedMark = false
        this.next_reply = index
      }
   }else{
      this.next_reply = index
      this.comment[index.type][index.index].repliedMark = true
   }
    },
    reply_btn(commentid , e) {
      //回复评论
      if (!this.$store.state.userId) {
        this.$login.show(e.pageY - 240);
        return;
      }
      alert("功能还未完全");
    },
    like(item ,e) {      //点赞
      if (!this.$store.state.userId) {
        this.$login.show(e.pageY - 240);
        return;
      }
      if (!item.liked) {
        item.liked = true;
        likeComment(this.ids.id, item.commentId, 1, this.type).then(
          (res) => {
            item.likedCount++;
          },
          (err) => {
            console.log("点赞失败");
          }
        );
      } else {
        item.liked = false;
        likeComment(this.ids.id, item.commentId, 0, this.type).then(
          (res) => {
            item.likedCount--;
            console.log(res);
          },
          (err) => {
            console.log("取消点赞失败");
          }
        );
      }
    },
    doComment(e) {
      //获取焦点
      if (!this.$store.state.userId) {
        this.$login.show(Math.round(e.view.pageYOffset));
      }
    },
    send_comment(e) {
      //点击发送
      if (!this.$store.state.userId) {
        this.$login.show(e.pageY - 100);
      } else if (!this.text_content) {
        this.$Alter.show("写点什么吧", 1000);
      } else {
        comment(1, this.type, this.ids.id, this.text_content).then(res => {
          this.$Alter.show("评论成功", 1000);
          this.comment.comments.unshift({
            content: this.text_content,
            user: {
              avatarUrl: this.$store.state.profile,
              nickname: this.$store.state.nickName,
            },
            likedCount: 0,
            time:"刚刚"
          });
          this.text_content = "";
        },err => {
          console.log("评论失败")
        })
      }
    },
    album_commentlist(id) {
      //专辑最新评论
      comment_album(id).then((res) => {
         this.comment.comments = res.data.comments
      });
       //专辑精彩评论
     comment_hot(id , this.type).then(res =>{
          this.comment.hotComments =res.data.hotComments
     })
    },
    song_commentlist(id) {
      //歌单最新评论
      comment_playlist(id).then(res => {
       this.comment.comments = res.data.comments
     });
     //歌单精彩评论
     comment_hot(id , this.type).then(res =>{
          this.comment.hotComments = res.data.hotComments
     })
    },
    top_commentlist(id) {
      //排行榜最新评论
      comment_playlist(id).then(res => {
       this.comment.comments = res.data.comments
     });
     //排行榜精彩评论
     new_comment(id , this.type ,1 , 15).then(res =>{
          this.comment.hotComments = res.data.data.comments
     })
    },
    //歌曲评论
    music_commentlist(id) {
      //歌曲最新评论
      comment_music(id, 20).then((res) => {
          this.comment = res.data
      });
      //歌曲精彩评论
      comment_hot(id , this.type).then(res =>{
          this.comment.hotComments =res.data.hotComments
     })
    },
    TO_userHome(uid){
     this.$router.push({path:'/userHome' , query:{id:uid}})
    },
    Text(value){
       return value.replace(/\n/g , '<br>')
    }
  },
  filters: {
    transitionTime(value) {
      if(value == "刚刚"){
         return value
      }
      return formatMonth(value);
    },
  },
  watch: {
    id(value) {
      this.ids = value;
      if (value.name == "专辑") {
        this.type = 3;
        this.album_commentlist(value.id);
      }
     if (value.name == "歌单") {
        this.type = 2;
        this.song_commentlist(value.id);
      }
    if (value.name == "歌曲") {
        this.type = 0;
        this.music_commentlist(value.id);
      }
    if (value.name == "排行榜") {
        this.type = 2;
        this.top_commentlist(value.id);
      }
    },
  },
  created() { 
    this.ids = this.id;
    if ( this.id.name == "专辑") {
      this.type = 3;
      this.album_commentlist(this.id.id);
    } else if ( this.id.name == "歌单") {
      this.type = 2;
      this.song_commentlist(this.id.id);
    } else if (this.id.name == "歌曲") {
      this.type = 0;
      this.music_commentlist(this.id.id);
    }else if (this.id.name == "排行榜") {
        this.type = 2;
        this.top_commentlist(this.id.id);
    }
   },
};
</script>

<style scoped>
.notice {
  position: absolute;
  top: 100px;
  left: 220px;
  width: 220px;
  height: 70px;
  z-index: 100;
  background-color: #fff;
  box-shadow: 1px 1px 5px #888888;
  border-radius: 5px;
}
.notice .icon {
  display: inline-block;
  margin-top: 25px;
  margin-left: 25px;
}
.notice span {
  display: inline-block;
  font-size: 13px;
  margin-left: 5px;
}
.f-mgt40 {
  margin-top: 40px;
  position: relative;
}
.u-title-1 {
  padding: 0 10px 0 32px;
  height: 33px;
  line-height: 22px;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
.u-title-1 h3 {
  font-size: 20px;
  line-height: 28px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.u-title h3 {
  float: left;
  font-weight: normal;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.u-title-1 .sub {
  margin: 9px 0 0 20px;
  float: left;
}
.s-fc3 {
  color: #666;
  font-size: 12px;
}
.m-cmmt {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 20px;
}
.m-cmmt .iptarea {
  margin-bottom: 20px;
}
.m-cmmt .head {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .head img {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .iptarea .m-cmmtipt {
  margin-left: 62px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.f-cb::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div.holder-parent {
  position: relative;
  zoom: 1;
}
.u-txtwrap {
  padding-right: 14px;
}
.m-cmmtipt .area {
  height: 50px;
  display: block;
}
textarea.u-txt {
  width: 100%;
  margin-right: -20px;
}
.u-txt {
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
}
textarea {
  resize: none;
  overflow: auto;
  font-size: 12px;
  outline: none;
}
.m-cmmtipt .btns {
  clear: both;
  padding-top: 10px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
em,
i {
  font-style: normal;
  text-align: left;
  font-size: inherit;
}
.m-cmmtipt .btns .icn {
  float: left;
  margin: 0px 10px 0 0;
  cursor: pointer;
}
.u-icn {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  background: url("../../assets/imgs/icon.png");
}
.u-icn-36 {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
}
.u-icn-41 {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}
.u-btn {
  display: inline-block;
  background: url("../../assets/imgs/button.png");
}
.m-cmmtipt .btns .btn {
  float: right;
}
.u-btn-1 {
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
}
a {
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
}
.m-cmmtipt .btns .zs {
  float: right;
  margin-right: 10px;
  line-height: 25px;
}
.s-fc4 {
  color: #999;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
.u-hd4 {
  position: relative;
  top: 1px;
  height: 20px;
  border-bottom: 1px solid #cfcfcf;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.m-cmmt .cmmts .itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.m-cmmt .head {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .cmmts img {
  vertical-align: middle;
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
}
.m-cmmt .cmmts .cntwrap {
  margin-left: 60px;
}

.m-cmmt .cmmts .cnt {
  width: 100%;
  overflow: hidden;
  line-height: 20px;
}
.f-brk {
  word-wrap: break-word;
  white-space: normal;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.m-cmmt .cmmts .que {
    padding: 8px 19px;
    margin-top: 10px;
    line-height: 20px;
    background: #f4f4f4;
    border: 1px solid #dedede;
}
.m-cmmt .cmmts .que .darr {
    position: absolute;
    top: -7px;
    left: 20px;
    font-size: 12px;
    line-height: 14px;
}
.m-cmmt .cmmts .que .darr i {
    position: absolute;
    top: 0;
    left: 0;
}
.m-cmmt .cmmts .que .darr .bd {
    color: #dedede;
}
.m-cmmt .cmmts .que .darr .bg {
    top: 1px;
    color: #f4f4f4;
}
.m-cmmt .cmmts .cntwrap .s-fc7 {
  margin-right: 5px;
}
.s-fc7 {
  color: #0c73c2;
}
.m-cmmt .cmmts div.rp {
  margin-top: 15px;
  text-align: right;
}
.m-cmmt .cmmts .time {
  float: left;
  margin: 0 !important;
}
.s-fc4 {
  color: #999;
}
.m-cmmt .cmmts .zan {
  margin-top: -4px;
}
.u-icn2 {
  display: inline-block;
  overflow: hidden;
  background: url("../../assets/imgs/icon2.png");
}
.u-icn2-12 {
  width: 15px;
  height: 14px;
  background-position: -150px 0;
}
.u-icn2-13 {
  width: 15px;
  height: 14px;
  background-position: -170px 0;
}
.u-icn2-12:hover {
  background-position: -150px -20px;
}
.m-cmmt .cmmts .sep {
  margin: 0 8px;
  color: #ccc;
}
.s-fc3 {
  color: #666;
}
.m-quk-1 {
  margin-bottom: 15px;
}
.m-quk {
  margin-left: 60px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.m-quk .iner {
  padding: 15px;
  background: #f8f8f8;
  border: 1px solid #fcfcfc;
  border-radius: 2px;
}
.m-quk-1 .corr {
  right: 5px;
}
.m-quk .corr {
  position: absolute;
  top: -9px;
}
.u-arr-1 {
  width: 14px;
}
.u-arr {
  height: 14px;
  overflow: hidden;
}
.u-arr-1 .arrclr {
  margin: -9px 0 0;
  color: #f8f8f8;
}
.u-arr-1 .arrline {
  color: red;
}
.u-arr .arrline,
.u-arr .arrclr {
  display: block;
  font-family: "SimSun";
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  height: 10px;
  line-height: normal;
}
div.holder-parent {
  position: relative;
  zoom: 1;
}
.u-txtwrap {
  padding-right: 14px;
}
.m-cmmtipt-1 .area {
  height: 20px;
}
.m-cmmtipt .area {
  display: block;
}
textarea.u-txt {
  width: 100%;
  margin-right: -20px;
  font-size: 12px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
.u-txt {
  margin: 0;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
}
.m-cmmtipt .btns {
  clear: both;
  padding-top: 10px;
}
.f-pr {
  position: relative;
  zoom: 1;
}
.m-cmmtipt .btns .btn {
  float: right;
}
.u-btn {
  display: inline-block;
  background: url("../../assets/imgs/button.png") no-repeat 0 9999px;
}
.u-btn-1 {
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
}
</style>